<template>
  <el-dialog v-model="visible" title="切屏设置"  align-center>
    <div class="form-wrapper">
      <el-form  :model="formModel"  label-width="auto" class="form">
        <el-form-item label="警告次数">
          <el-input
            v-model="formModel.warnCnt"
            placeholder="请输入警告次数"
          />
        </el-form-item>
        <el-form-item label="警告内容">
          <el-input
            v-model="formModel.warnContent"
            placeholder="请输入警告内容"
          />
        </el-form-item>
        <el-form-item label="切屏次数">
          <el-input
            v-model="formModel.screenCnt"
            placeholder="请输入切屏次数"
          />
        </el-form-item>
        <el-form-item label="切屏提示">
          <el-input
            v-model="formModel.screenContent"
            placeholder="请输入切屏提示"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { updatScreenSetApi } from "@/api/invigilateCenter/index.js";
import { ElMessage } from "element-plus";

let visible = ref(false);

const formModel = ref({
  warnCnt: 3,
  screenCnt: 5,
  screenContent: "切屏达到5次，考试自动交卷",
  warnContent: "警告，切屏已经3次！",
});
const confirm = async ()=>{
    let setRes = await updatScreenSetApi(formModel.value)
    console.log("🚀 ~ confirm ~ setRes:", setRes)
    if(setRes.code === 200) {
        ElMessage.success('切屏设置成功')
        visible.value = false
    }
}
const openController = (initData)=>{
    formModel.value = {...initData}
    visible.value = true
}
defineExpose({ openController });
</script>
<style lang="scss" scoped>
.form-wrapper{
    display: flex;
    justify-content: space-between;
    padding: 0 100px;
}
.form{
    flex: 1;
}
</style>
